@page "/cognitive/browse/{projectId}/annotate/{imageName}"
@using AyBorg.Web.Shared.Display
@using SDK.Authorization
@attribute [Authorize(Roles = $"{Roles.Administrator}, {Roles.Engineer}")]

<PageTitle>@_projectName | Annotate/Cognitive | AyBorg</PageTitle>

<div class="page-loading-bar">
    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-0" hidden="@(!_isLoading)" />
</div>

<MudToolBar Class="px-0">
    <MudGrid>
        <MudItem xs="6" md="2">
            <MudStack Spacing="5" Row>
                <MudTooltip Text="Back">
                    <MudFab StartIcon="@Icons.Material.Filled.ArrowBackIosNew" Color="Color.Primary" Size="Size.Small" OnClick="@BackClicked" />
                </MudTooltip>
                <MudText Typo="Typo.h6" Class="pt-1">Annotate</MudText>
            </MudStack>
        </MudItem>
        <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
            <MudItem xs="0" md="8">
                <div class="d-flex flex-column mud-full-width">
                    <MudPagination class="mx-auto" Count="@_selectedImageNames.Count()"
                        Selected="@_selectedImageNumber"
                        SelectedChanged="@SelectedImageNumberChanged"
                        SelectedChanged:preventDefault="true" />
                </div>
            </MudItem>
        </MudHidden>
        <MudItem xs="6" md="2" Class="d-flex flex-row-reverse">
            <MudButton StartIcon="@Icons.Material.Filled.SaveAlt"
                    Variant="Variant.Filled"
                    Color="Color.Primary"
                    Disabled="@(!IsSaveEnabled())"
                    OnClick="@SaveClicked">
                Save
            </MudButton>
        </MudItem>
    </MudGrid>
</MudToolBar>

<MudGrid class="grid-container">
    <MudItem xs="12" md="4" lg="3" class="mud-full-height">
        <!-- Annotations container -->
        <MudCard class="mud-full-height">
            <MudCardHeader>
                <MudText Typo="Typo.h6">Annotations</MudText>
            </MudCardHeader>
            <MudCardContent style="height: calc(100% - 75px);">
                <div class="d-flex flex-column mud-full-height">
                    <MudText Typo="Typo.caption">Tags:</MudText>
                    <MudChipSet>
                        @foreach (var tag in _tempValues.Tags)
                        {
                            <MudChip Text="@tag" Color="Color.Default" Disabled/>
                        }
                    </MudChipSet>
                    <MudDivider />
                    <MudTabs Class="mud-full-height overflow-hidden">
                        <MudTabPanel Text="Classes">
                            <div class="tab-content">
                                <MudTextField @ref="_addClassFieldRef" T="string" Label="Add" Placeholder="Class like 'person' or 'car' (must be unique) ..."
                                    Adornment="Adornment.End"
                                    AdornmentIcon="@Icons.Material.Filled.Add"
                                    OnAdornmentClick="AddClassClicked"
                                    Value="@_newClassName"
                                    TextChanged="AddClassChanged"
                                    OnKeyUp="AddClassKeyUp"
                                    Immediate
                                    Clearable/>
                                @foreach (var classObj in _tempValues.ClassLabels.OrderBy(c => c.Index))
                                {
                                    <ClassSelectorItem ClassLabel="@classObj"
                                        DeleteDisabled="@IsClassDeleteable(classObj)"
                                        OnEditClicked="@ClassEditClicked"
                                        OnDeleteClicked="@ClassDeleteClicked"
                                        OnDrawClicked="@ClassDrawClicked"
                                        Count="@_tempValues.Layers.Count(l => l.ClassIndex == classObj.Index)" />
                                }
                            </div>
                        </MudTabPanel>
                        <MudTabPanel Text="Layers">
                            <div class="tab-content">
                                @foreach (var layerObj in _tempValues.Layers.Reverse())
                                {
                                    <LayerSelectorItem Layer="@layerObj"
                                        Name="@_tempValues.ClassLabels.First(c => c.Index.Equals(layerObj.ClassIndex)).Name"
                                        OnDeleteClicked="@LayerDeleteClicked" />
                                }
                            </div>
                        </MudTabPanel>
                    </MudTabs>
                </div>
            </MudCardContent>
        </MudCard>
    </MudItem>
    <MudItem xs="12" md="8" lg="9" class="mud-full-height">
        <!-- Image container -->
        <MudCard class="mud-full-height">
            <MudCardHeader>
                <MudText Typo="Typo.h6">Image</MudText>
            </MudCardHeader>
            <MudCardContent>
                <div style="height: calc(100vh - 268px);">
                    <Display2D
                        Base64Image="@(_imageContainer != null ? _imageContainer.ToBase64String() : string.Empty)"
                        ImageWidth="@(_imageContainer != null ? _imageContainer.Width : 0)"
                        ImageHeight="@(_imageContainer != null ? _imageContainer.Height : 0)"
                        Shapes="@_shapes"
                        @bind-DrawMode="@_drawMode"
                        @bind-StatusBarText="@_drawStatusBarText"
                        OnShapeDrawed="@ShapeDrawed" />
                </div>
            </MudCardContent>
        </MudCard>
    </MudItem>
</MudGrid>
